{% load staticfiles %}
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <title>登录注册忘记密码页面</title>
    <style>
        * {
            outline-width: 0;
            font-family: "Nunito" !important
        }
        body {
            height: 100vh;
            width: 100vw;
            /* background: url("img/bg.jpg") center/cover fixed; */
            background-color: lightslategray;
            display: flex;
            justify-content: center;
            align-items: center
        }

        #formContainer {
            display: flex;
            transition: .2s ease;
            height: 342.5px;
            transition-delay: .3s
        }

        #formContainer.toggle {
            height: 480px;
            transition-delay: 0s
        }

        .formLeft {
            background: #fff;
            border-radius: 5px 0 0 5px;
            padding: 0 35px;
            box-sizing: border-box;
            display: flex;
            align-items: center
        }

        .formLeft img {
            display: block;
            width: 72px;
            border-radius: 50%;
            box-shadow: 0 5px 5px rgba(0, 0, 0, 0.2)
        }

        .formRight {
            position: relative;
            overflow: hidden;
            border-radius: 0 5px 5px 0;
            display: flex;
            flex-direction: column;
            justify-content: center
        }

        .formRight:before {
            content: "";
            position: absolute;
            top: -10px;
            left: -10px;
            width: calc(100%+20px);
            height: calc(100%+20px);
            background-color: lightslategray;
            box-shadow: inset 0 0 0 1000px rgba(0, 0, 0, 0.5);
            filter: blur(5px)
        }

        .formRight form {
            position: relative;
            width: 350px;
            padding: 25px;
            box-sizing: border-box;
            white-space: nowrap;
            overflow: hidden
        }

        .formRight form header {
            color: #fff;
            text-align: center;
            margin-bottom: 15px
        }

        .formRight form header h1 {
            margin: 0;
            font-weight: 400;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none
        }

        .formRight form header p {
            margin: 5px 0 0;
            opacity: .5;
            font-size: 14px;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none
        }

        .formRight form section label {
            display: block;
            margin-bottom: 15px;
            position: relative
        }

        .formRight form section label p {
            color: #fff;
            margin: 0 0 10px 0;
            font-weight: 600;
            font-size: 12px;
            opacity: .5;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none
        }

        .formRight form section label input {
            width: 100%;
            display: block;
            border: 0;
            background: transparent;
            color: #fff;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
            padding: 0 0 10px;
            box-sizing: border-box;
            font-weight: 600
        }

        .formRight form section label input:focus~.border {
            transform: scale(1, 1)
        }

        .formRight form section label input:not(:-moz-placeholder-shown)~.border {
            transform: scale(1, 1)
        }

        .formRight form section label input:not(:-ms-input-placeholder)~.border {
            transform: scale(1, 1)
        }

        .formRight form section label input:not(:placeholder-shown)~.border {
            transform: scale(1, 1)
        }

        .formRight form section label .border {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 2px;
            background: #fff;
            transform: scale(0, 1);
            transition: .2s ease
        }

        .formRight form section label:last-child {
            margin-bottom: 0
        }

        .formRight form section button {
            background: #00897B;
            border: 0;
            width: 100%;
            padding: 10px 0;
            font-weight: 600;
            color: #fff;
            cursor: pointer
        }

        .formRight form section button:hover {
            background: #007f72
        }

        .formRight form footer {
            margin-top: 15px;
            display: flex
        }

        .formRight form footer button {
            background: transparent;
            padding: 0;
            border: 0;
            color: #fff;
            cursor: pointer;
            font-size: 12px;
            font-weight: bold;
            flex: 1;
            opacity: .5
        }

        .formRight form footer button:hover {
            opacity: 1
        }

        .formRight form.otherForm {
            top: 0;
            left: 0;
            position: absolute;
            background: #fff;
            height: 100%;
            z-index: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
            width: 0;
            padding: 25px 0;
            transition: .2s ease;
            transition-delay: .2s;
            border-left: 1px solid rgba(0, 0, 0, 0.1)
        }

        .formRight form.otherForm header {
            color: #000;
            opacity: 0;
            transition: .2s ease;
            transition-delay: 0s
        }

        .formRight form.otherForm p {
            color: #000
        }

        .formRight form.otherForm section {
            opacity: 0;
            transition: .2s ease;
            transition-delay: 0s
        }

        .formRight form.otherForm footer {
            border-top-color: rgba(0, 0, 0, 0.1);
            opacity: 0
        }

        .formRight form.otherForm footer button {
            color: #000
        }

        .formRight form.otherForm input {
            border-color: rgba(0, 0, 0, 0.1);
            color: #000
        }

        .formRight form.otherForm .border {
            background: #000
        }

        .formRight form.otherForm.toggle {
            width: 100%;
            padding: 25px;
            transition-delay: 0s
        }

        .formRight form.otherForm.toggle header,
        .formRight form.otherForm.toggle section,
        .formRight form.otherForm.toggle footer {
            opacity: 1;
            transition-delay: .3s
        }

        button,
        hr,
        input {
            overflow: visible
        }

        audio,
        canvas,
        progress,
        video {
            display: inline-block
        }

        progress,
        sub,
        sup {
            vertical-align: baseline
        }

        html {
            font-family: sans-serif;
            line-height: 1.15;
            -ms-text-size-adjust: 100%;
            -webkit-text-size-adjust: 100%
        }

        body {
            margin: 0
        }

        menu,
        article,
        aside,
        details,
        footer,
        header,
        nav,
        section {
            display: block
        }

        h1 {
            font-size: 2em;
            margin: .67em 0
        }

        figcaption,
        figure,
        main {
            display: block
        }

        figure {
            margin: 1em 40px
        }

        hr {
            box-sizing: content-box;
            height: 0
        }

        code,
        kbd,
        pre,
        samp {
            font-family: monospace, monospace;
            font-size: 1em
        }

        a {
            background-color: transparent;
            -webkit-text-decoration-skip: objects
        }

        a:active,
        a:hover {
            outline-width: 0
        }

        abbr[title] {
            border-bottom: 0;
            text-decoration: underline;
            text-decoration: underline dotted
        }

        b,
        strong {
            font-weight: bolder
        }

        dfn {
            font-style: italic
        }

        mark {
            background-color: #ff0;
            color: #000
        }

        small {
            font-size: 80%
        }

        sub,
        sup {
            font-size: 75%;
            line-height: 0;
            position: relative
        }

        sub {
            bottom: -.25em
        }

        sup {
            top: -.5em
        }

        audio:not([controls]) {
            display: none;
            height: 0
        }

        img {
            border-style: none
        }

        svg:not(:root) {
            overflow: hidden
        }

        button,
        input,
        optgroup,
        select,
        textarea {
            font-family: sans-serif;
            font-size: 100%;
            line-height: 1.15;
            margin: 0
        }

        button,
        select {
            text-transform: none
        }

        [type=submit],
        [type=reset],
        button,
        html [type=button] {
            -webkit-appearance: button
        }

        [type=button]::-moz-focus-inner,
        [type=reset]::-moz-focus-inner,
        [type=submit]::-moz-focus-inner,
        button::-moz-focus-inner {
            border-style: none;
            padding: 0
        }

        [type=button]:-moz-focusring,
        [type=reset]:-moz-focusring,
        [type=submit]:-moz-focusring,
        button:-moz-focusring {
            outline: ButtonText dotted 1px
        }

        fieldset {
            border: 1px solid silver;
            margin: 0 2px;
            padding: .35em .625em .75em
        }

        legend {
            box-sizing: border-box;
            color: inherit;
            display: table;
            max-width: 100%;
            padding: 0;
            white-space: normal
        }

        textarea {
            overflow: auto
        }

        [type=checkbox],
        [type=radio] {
            box-sizing: border-box;
            padding: 0
        }

        [type=number]::-webkit-inner-spin-button,
        [type=number]::-webkit-outer-spin-button {
            height: auto
        }

        [type=search] {
            -webkit-appearance: textfield;
            outline-offset: -2px
        }

        [type=search]::-webkit-search-cancel-button,
        [type=search]::-webkit-search-decoration {
            -webkit-appearance: none
        }

        ::-webkit-file-upload-button {
            -webkit-appearance: button;
            font: inherit
        }

        summary {
            display: list-item
        }

        [hidden],
        template {
            display: none
        }
    </style>
</head>

<body>
    <div id="formContainer" class="dwo">
        <div class="formLeft"><img src="{% static 'images/avatar.jpeg' %}"></div>
        <div class="formRight">
            <!-- Forgot password form -->
            <form id="forgot" class="otherForm" action="{% url 'user_forgot' %}" method="POST">
                {% csrf_token %}
                <header>
                    <h1>忘记密码</h1>
                    <p>输入邮箱找回密码</p>
                </header>
                <section><label>
                        <p>邮箱</p><input type="email" placeholder=" ">
                        <div class="border"></div>
                    </label><button type="submit">发送邮件</button></section>
                <footer><button type="button" class="forgotBtn">返回</button></footer>
            </form>
            <!-- Login form -->
            <form id="login" action="{% url 'user_login' %}" method="POST">
                {% csrf_token %}
                <header>
                    <h1 id="form_target">欢迎回来</h1>
                    <p>请先登录</p>
                </header>
                <section><label>
                        <p>用户名</p><input type="text" name="username" placeholder=" ">
                        <div class="border"></div>
                    </label><label>
                        <p>密码</p><input type="password" name="password" placeholder=" ">
                        <div class="border"></div>
                    </label><button type="submit">登 录</button></section>
                <footer><button type="button" class="forgotBtn">忘记密码？</button><button type="button" class="registerBtn">新用户？</button></footer>
            </form>
            <!-- Register form -->
            <form id="register" class="otherForm" action="{% url 'user_register' %}" method="POST">
                {% csrf_token %}
                <header>
                    <h1>用户注册</h1>
                </header>
                <section><label>
                        <p>用户名</p><input type="text" placeholder=" ">
                        <div class="border"></div>
                    </label><label>
                        <p>邮箱</p><input type="email" placeholder=" ">
                        <div class="border"></div>
                    </label><label>
                        <p>密码</p><input type="password" placeholder=" ">
                        <div class="border"></div>
                    </label><label>
                        <p>重复密码</p><input type="password" placeholder=" ">
                        <div class="border"></div>
                    </label><button type="submit" disabled="disabled">注 册(未开通)</button></section>
                <footer><button type="button" class="registerBtn">返回</button></footer>
            </form>
        </div>
    </div>
    <script src="{% static 'js/jquery.min.js' %}"></script>
    <script>
    $(function() {
        $(".forgotBtn").click(function() {
            $("#forgot").toggleClass("toggle")
        });
        $(".registerBtn").click(function() {
            $("#register, #formContainer").toggleClass("toggle")
        })
    });
    {#如果账号或密码输入有误，则提示#}
    {% if not form_is_valid %}
        function tips() {
            document.getElementById('form_target').innerHTML = '账号或密码有误'
        }
        tips();
    {% endif %}

    {#实现打字效果#}
    let form_tips = document.getElementById('form_target');
    {#通过innerHTML获取内容#}
    let str = form_tips.innerHTML;
    console.log(str);
    let i = 0, timer = 0;
    function typing(){
        if(i<str.length){
            form_tips.innerHTML = str.slice(0,i++)+'_';
            timer = setTimeout(typing,200);
        }else{
            form_tips.innerHTML = str;
            clearTimeout(timer);
        }
    }
    typing()
    </script>
</body>

</html>